<template>
  <div class="concatBox">
    <div class="top">
      <h2>- 联系我们 -</h2>
      <h3>多种联系方式，随时响应，让你我的沟通不会受限</h3>
      <el-row class="aaa" type="flex" justify="center"> 
        <el-col v-for="item in list" :key="item.p1" :xs="20" :sm="8" :md="8" :lg="8" :xl="8">
          
            <dl>
              <dt><img :src="item.url" alt=""></dt>
              <dd>
                <h4>{{ item.p1 }}</h4>
                <p>{{ item.p2 }}</p>
              </dd>
              
            </dl>
        </el-col>
      </el-row>
    </div>
    <div class="cen top">
      <h2>- 我们的地址 -</h2>
      <h3>已入驻多个不同地域的办公地点，始终为您提供品质如一的服务</h3>
      <el-row  style="width:90%;margin:0 auto;flex-wrap:wrap;" type="flex" justify="center"> 
        <el-col  :xs="20" :sm="14" :md="14" :lg="14" :xl="14">
          <img style="width:100%;" :src="heb" alt="">
        </el-col>
        <el-col  :xs="20" :sm="8" :md="8" :lg="8" :xl="8" class="fzm">
          <div class="t ">
            <div>HARBIN</div>
            哈尔滨
          </div>
          <div class="t">
            <div>详细地址</div>
            哈尔滨市南岗区 <br>
            哈西中交香颂A栋1006室
          </div>
        </el-col>
      </el-row>
      
    </div>
    <div class="bot top">
      <el-row class="aaa" type="flex" justify="center"> 
        <el-col style="padding:0 20px;" v-for="item in list1" :key="item.p1" :xs="20" :sm="7" :md="7" :lg="7" :xl="7">
          
            <dl>
              <dt><img :src="item.url" alt=""></dt>
              <dd>
                <h4>{{ item.p1 }}</h4>
                <br>
                <p>{{ item.p2 }}</p>
              </dd>
              
            </dl>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import email from "@/assets/images/aboutus/email.png"
import phone from "@/assets/images/aboutus/phone.png"
import web from "@/assets/images/aboutus/web.png"
import heb from "@/assets/images/aboutus/heb.png"
import img1 from "@/assets/images/aboutus/img1.png"
import img2 from "@/assets/images/aboutus/img2.png"
import img3 from "@/assets/images/aboutus/img3.png"
export default {
  data () {
    return {
      heb,
      list:[
        {
          url:email,
          p1:"客服邮箱",
          p2:"service@zhubaba.cn"
        },
        {
          url:phone,
          p1:"客服电话",
          p2:"0451-86650733"
        },
        {
          url:web,
          p1:"网站",
          p2:"www.zhubaba.cn"
        },
      ],
      list1:[
        {
          url:img1,
          p1:"任务精准派单",
          p2:`您的订单付款后，我们将马上通知
平台所有商家，进行抢单，抢单
满额为止！`
        },
        {
          url:img2,
          p1:"72小时完成起名",
          p2:`我们所有订单，基本都会在72小时
内完成，如需要增加回复，我们
会继续为你增加时间！`
        },
        {
          url:img3,
          p1:"随时随地沟通",
          p2:`我们的客服和测试人员会在您提交
需求之后，随时保持与您联系。及
时的沟通能更好的解决问题。您也
可以对我们提出建议。`
        },
      ],
    }
  }
}
</script>

<style lang="scss" scoped>
.concatBox{
  max-width: 1200px;
  margin: 0 auto;
}
.top{
  h2{
    font-size: 36px;
    color: #333;
    text-align: center;
    padding-top: 100px;
    margin-bottom: 30px;
    // font-style: italic;
  }
  h3{
    font-size: 16px;
    font-family: "PingFang SC";
    color: #878f92;
    text-align: center;
    margin-bottom: 60px;
  }
  .aaa{
    flex-wrap: wrap;
  }
  .grid-content{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
    dl{
      dt{
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 35px;
      }
      dd{
        h4,p{
           display: flex;
          align-items: center;
          margin-bottom: 10px;
          justify-content: center;
        }
        h4{
          font-size: 18px;
          font-family: "PingFang SC";
          color: #333;
        }
        p{
              font-size: 16px;
          font-family: "PingFang SC";
          color: #878f92;
          text-align: center;
        }

      }
    }
}
.cen{
  padding-bottom: 60px;
  .fzm{
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    padding-left: 38px;
    background-color: #fff;
    padding: 10px 0px 10px 38px;
    .t{
      font-size: 22px;
      color: #666666;
      >div{
        font-size: 14px;
        color: #bcbcbc;
        padding-bottom: 10px;
      }
    }
    
    
  }
}
.bot{
  padding: 48px 0;
  // background: #ebedef;
  p{
    line-height: 22px;
  }
}
</style>